<template>
	<div>
		<Navigation></Navigation>
		<Banner :banner_img="require('../assets/images/site_banner_hotel.jpg')" banner_msg='酒店预订'></Banner>
		<div class="tiem">
			<div class="con anpuan">
				<div class="left">入住时间&ensp;<input type="date" /> &ensp;晚&emsp;离店时间&ensp;<input type="date" /></div>
				<div class="center">3000-2000-特色民宿-不限-景区外</div>
				<div class="right"><input type="text" placeholder="请输入酒店名称" /><button type="button">搜索</button></div>
			</div>
		</div>
		<div class="wai anpuan">
			<div class="centers ">
				<div class="cons">
					<div class="lefts">
						<img src="../assets/images/tt1.jpg">
					</div>
					<div class="center">
						<p class="name">御舍温泉酒店</p>
						<div class="mating">
							酒店配套：<div>和谷料理餐厅</div>
							<div>健身房</div>
							<div>私产温泉</div>
						</div>
						<p class="site">地址：位于古北水镇景区的北部</p>
						<p class="phone">电话：010—81009999</p>
					</div>
					<div class="rights">
						<p><span class="ll">￥4880/起</span><span class="ss">￥2930起</span></p>
						<button type="button">已定满</button>
					</div>
				</div>
			</div>
		</div>
		<div class="wai anpuan">
			<div class="centers">
				<div class="cons">
					<div class="lefts">
						<img src="../assets/images/tt2.jpg">
					</div>
					<div class="center">
						<p class="name">御舍温泉酒店</p>
						<div class="mating">
							酒店配套：<div>和谷料理餐厅</div>
							<div>健身房</div>
							<div>私产温泉</div>
						</div>
						<p class="site">地址：位于古北水镇景区的北部</p>
						<p class="phone">电话：010—81009999</p>
					</div>
					<div class="rights">
						<p><span class="ll">￥4880/起</span><span class="ss">￥2930起</span></p>
						<button type="button">已定满</button>
					</div>
				</div>
			</div>
		</div>
		<div class="wai anpuan">
			<div class="centers">
				<div class="cons">
					<div class="lefts">
						<img src="../assets/images/tt3.jpg">
					</div>
					<div class="center">
						<p class="name">御舍温泉酒店</p>
						<div class="mating">
							酒店配套：<div>和谷料理餐厅</div>
							<div>健身房</div>
							<div>私产温泉</div>
						</div>
						<p class="site">地址：位于古北水镇景区的北部</p>
						<p class="phone">电话：010—81009999</p>
					</div>
					<div class="rights">
						<p><span class="ll">￥4880/起</span><span class="ss">￥2930起</span></p>
						<button type="button">已定满</button>
					</div>
				</div>
			</div>
		</div>
		<div class="wai anpuan">
			<div class="centers">
				<div class="cons">
					<div class="lefts">
						<img src="../assets/images/tt4.jpg">
					</div>
					<div class="center">
						<p class="name">御舍温泉酒店</p>
						<div class="mating">
							酒店配套：<div>和谷料理餐厅</div>
							<div>健身房</div>
							<div>私产温泉</div>
						</div>
						<p class="site">地址：位于古北水镇景区的北部</p>
						<p class="phone">电话：010—81009999</p>
					</div>
					<div class="rights">
						<p><span class="ll">￥4880/起</span><span class="ss">￥2930起</span></p>
						<button type="button">已定满</button>
					</div>
				</div>
			</div>
		</div>
		<div class="wai anpuan">
			<div class="centers">
				<div class="cons">
					<div class="lefts">
						<img src="../assets/images/tt1.jpg">
					</div>
					<div class="center">
						<p class="name">御舍温泉酒店</p>
						<div class="mating">
							酒店配套：<div>和谷料理餐厅</div>
							<div>健身房</div>
							<div>私产温泉</div>
						</div>
						<p class="site">地址：位于古北水镇景区的北部</p>
						<p class="phone">电话：010—81009999</p>
					</div>
					<div class="rights">
						<p><span class="ll">￥4880/起</span><span class="ss">￥2930起</span></p>
						<button type="button">已定满</button>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Banner from '../components/Banner.vue';
	import Navigation from '../components/Navigation.vue';
	import Footer from '../components/Footer.vue';
	export default{
		components:{Banner,Navigation,Footer},
		data() {
			return {
				list: [{}]
			}
		}
	}
</script>

<style>
	@import url("../assets/css/public.css");
</style>
<style scoped="scoped">
	.top {
		width: 100%;
		height: 500px;
		overflow: hidden;
		position: relative;
		background-color: red;
	
	}
	.top>img {
		width: 1920px;
		height: 500px;
		position: absolute;
		left: 50%;
		margin-left: -960px;
	}
	
	.top .text {
		width: 100%;
		line-height: 60px;
		position: absolute;
		bottom: 85px;
	
	}
	
	.top .text .an {
		display: flex;
		justify-content: flex-start;
	}
	
	.top .text .an>img {
		width: 40px;
	}
	
	.top .text .an>p {
		color: white;
		font-size: 50px;
		font-weight: bold;
	}
	.wai{
		width: 1280px;
		margin: 0 auto;
	}
	
	.tiem {
		width: 1280px;
		margin: 0 auto;
		height: 70px;
		background-color: #fffdeb;
	}
	
	.tiem .con {
		height: 70px;
	}
	
	.tiem .con {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	
	.tiem .con .left input {
		border: none;
		font-size: 20px;
	}
	
	.tiem .con .left,
	.tiem .con .center {
		line-height: 50px;
		background-color: white;
	}
	
	.tiem .con .right>input {
		line-height: 50px;
		border-radius: 3px;
		border: none;
	}
	
	.tiem .con .right>button {
		line-height: 50px;
		border: none;
		width: 100px;
		margin-left: 10px;
		background-color: #beb464;
		color: white;
	}
	
	.centers {
		height: 300px;
		background-color: #e5fffa;
		overflow: hidden;
		margin-top: 20px;
	}
	
	.centers .cons {
		height: 94%;
		width: 98%;
		margin: auto;
		background-color: white;
		margin-top: 10px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.centers .cons .lefts {
		width: 30%;
		height: 80%;
		background-color: #42B983;
	}
	
	.centers .cons .lefts img {
		width: 105%;
		height: 100%;
	}
	
	.centers .cons .lefts img:hover {
		transform: scale(1.03);
		animation-name: img;
		animation-duration: 0.5s;
		animation-timing-function: linear
	}
	
	.centers .center {
		width: 45%;
		height: 80%;
		margin-left: 30px;
		border-right: 1px solid #666;
	}
	
	.centers .center .name {
		color: #f70;
		font-size: 32px;
		font-weight: bold;
	}
	
	.centers .center .mating {
		width: 70%;
		margin: 20px 0;
	
	}
	
	.centers .center .mating>div {
		border-radius: 3px;
		padding: 5px 10px;
		display: inline-block;
		border: 1px solid #999;
		margin-left: 5px;
		line-height: 15px;
		font-size: 13px;
	}
	
	.centers .center .site {
		margin: 10px 0;
	}
	
	.centers .rights {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: column;
		width: 30%;
		height: 80%;
	}
	
	.centers .rights>p {
		margin-top: 10%;
	}
	
	.centers .rights>p .ll {
		margin-top: 5%;
		color: #666666;
		font-size: 15px;
		font-weight: bold;
		text-decoration: line-through;
	}
	
	.centers .rights>p .ss {
		font-size: 25px;
		color: #baa640;
	}
	
	.centers .rights>button {
		margin-top: 25%;
		color: white;
		width: 120px;
		line-height: 35px;
		border: none;
		background-color: #999;
	}
	
</style>
